<template>
  <div class="rules">
    <p class="drop-down" v-if="dropDown">松手刷新数据...</p>
    <div class="bscroll" ref="bscroll">
      <div class="bscroll-container">
    <ul class="userList">
      <li>
        <span>姓名</span>
        <span>年龄</span>
        <span>性别</span>
        <span class="font">电话</span>
        <span>编辑</span>
      </li>
      <li v-for="val in arr" :key="val.phone">
        <span>{{val.name}}</span>
        <span>{{val.age}}</span>
        <span>{{val.gender|toGender}}</span>
        <span class="font">{{val.phone}}</span>
        <span @click="delOneFromArr(val)">删除</span>
      </li>
    </ul>
  </div>
  </div>
  </div>
</template>
<script>
import BScroll from 'better-scroll'

export default {
  data () {
    return {
      currentKey: -1,
      arr_: [],
      dropDown: false
    }
  },
  // 方法
  beforeCreate () {
    this.$bus.$on('change', (value) => {
      this.arr_.splice(this.arr_.indexOf(value), 1)
    })
  },
  mounted () {
    this.scrollFn()
  },
  methods: {
    scrollFn () {
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.bscroll, {
            click: true,
            scrollY: true,
            probeType: 3
          })
        } else {
          this.scroll.refresh()
        }
        this.scroll.on('scroll', (pos) => {
          // console.log(pos.y, this.dropDown)
          // 如果下拉超过50px 就显示下拉刷新的文字
          if (pos.y > 50) {
            this.dropDown = true
          } else {
            this.dropDown = false
          }
        })
        // touchEnd（手指离开以后触发） 通过这个方法来监听下拉刷新
        this.scroll.on('touchEnd', (pos) => {
          // 下拉动作
          if (pos.y > 50) {
            // console.log("下拉刷新成功")
            this.dropDown = false
          }
          // 上拉加载 总高度>下拉的高度+10 触发加载更多
          if (this.scroll.maxScrollY > pos.y + 10) {
            // console.log("加载更多")
            // 使用refresh 方法 来更新scroll  解决无法滚动的问题
            this.scroll.refresh()
          }
          console.log(this.scroll.maxScrollY + '总距离----下拉的距离' + pos.y)
        })
        console.log(this.scroll.maxScrollY)
      })
    },
    delOneFromArr (value) {
      this.$bus.$emit('value', value)
    },
    getUser () {
      this.$http.get('/usr')
        .then((res) => {
          this.arr_ = res.data
          console.log(this.arr_)
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },
  // 运算
  computed: {
    arr () {
      const mobileReg = /^1(3[4-9]|47|5[012789])|8[2378]\d{8}$/
      const selectedHandle = {
        '-1': () => this.arr_,
        0: () => this.arr_.filter(v => v.gender),
        1: () => this.arr_.filter(v => !v.gender),
        2: () => this.arr_.filter(v => mobileReg.test(v.phone)),
        3: () => [...this.arr_].sort((prev, next) => prev.age - next.age)
      }
      return selectedHandle[this.currentKey]()
    }
  },
  // 过滤
  filters: {
    // 判定男女
    toGender (val) {
      return val ? '男' : '女'
    }
  },
  created () {
    this.$bus.$on('changeCurrentKey', (key) => {
      this.currentKey = key
    })
    this.getUser()
  }
}

</script>
<style scoped>
  .bscroll{
    width: 100%;
    height:540px;
    overflow: hidden;
  }
  .drop-down{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height:50px;
    text-align: center;
    font-size:0.8rem;
    color:#CCC;
  }
  .userList {
    list-style: none;
    padding: 0;
  }
  li {
    height: 50px;
    font-size: 0;
    border-bottom: 1px solid gainsboro;
  }
  span{
    display: inline-block;
    width: 18vw;
    font-size: 15px;
    text-align: center;
    line-height: 50px;
    color: #555;
  }
  .font{
    display: inline-block;
    width: 26vw;
    font-size: 15px;
    text-align: center;
    line-height: 40px;
    color: #555;
  }
</style>
